<template>
    <!-- 评论自组建 -->
    <div class="content">
        <!-- 评论头 -->
        <div class="header">
            发表评论
        </div>
        <!-- 评论区 -->
        <textarea placeholder="请输入想要BB的内容（最多BB120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" id="send" @click="send">发表</mt-button>
        <ul class="list">
            <li class="item" v-for="item in commit" :key="item.id">
                <div class="item_header">
                    <div class="user">
                        <img :src="item.headpic" alt="" class="headerPic">
                        <span class="username">{{item.name}}</span>
                    </div>
                    <span class="time">{{item.time | dateFormat}}<i>{{item.floor}}楼</i></span>
                </div>
                <p class="item_txt">{{item.txt}}</p>
            </li>
        </ul>
        <mt-button type="danger" plain size="large" id="more" @click="more">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            msg: '',
            id: 5,
            commit: [{
                id: 5,
                headpic: './static/images/newList1.gif',
                name: '起风了',
                time: '2019-4-15 15:15:15',
                floor: 5,
                txt: '开局一张图，内容全靠吹？ 还有脸天天给我推？'
            },{
                id: 4,
                headpic: './static/images/newList2.gif',
                name: '吸薯霸王',
                time: '2019-4-14 14:14:14',
                floor: 4,
                txt: 'switch本来就不贵，关键是游戏贵，几个游戏就买一台机器了。'
            },{
                id: 3,
                headpic: './static/images/newList3.jpg',
                name: '???',
                time: '2019-4-13 13:13:13',
                floor: 3,
                txt: '图文不配啊'
            },{
                id: 2,
                headpic: './static/images/newList4.png',
                name: '从良黑车司机',
                time: '2019-4-12 12:12:12',
                floor: 2,
                txt: '这是真的，我在现场，我就是那个螺丝钉'
            },{
                id: 1,
                headpic: './static/images/newList5.jpg',
                name: '秋名山上老司机',
                time: '2019-4-11 11:11:11',
                floor: 1,
                txt: 'switch机能已经很弱了，再降还怎么玩¿'
            }]
        }
    },
    methods: {
        send() {
            if (this.msg.trim() == '') {
                MessageBox({
                    title: '帅比作者提示您',
                    message: '你还没输入内容呢',
                });
                this.msg='';
                return;
            }
            let info = {
                id: ++this.id,
                headpic: './static/images/newList7.jpg',
                name: '傻屌网友',
                time: new Date(),
                floor: this.id,
                txt: this.msg                
            }
            this.commit.unshift(info);
            MessageBox({
                title: '帅比博主提示您',
                message: '发表成功',
            });
            this.msg='';
        },
        more() {
            Toast({
                message: '已经到底咯',
                position: 'bottom',
                duration: 2000
            });
        }
    }
}
</script>

<style scoped>
    /* 中心 */
    .content {
        padding: 10px;
    }
    /* 评论头 */
    .header {
        height: 28px;
        line-height: 28px;
        border-bottom: 1px solid #ededed;
        margin-bottom: 10px;
    }
    /* 评论框 */
    textarea {
        font-size: 12px;
    }
    /* 评论区 */
    .list {
        padding-left: 0;
        list-style: none;
    }
    .item {
        border-top: 1px solid #ededed;
        padding-top: 10px;
    }
    .item_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .headerPic {
        width: 30px;
        height: 30px;
    }
    .user {
        display: flex;
        align-items: center;
    }
    .username {
        margin-left: 10px;
        font-size: 14px;
        color: #f34f18;
    }
    .time {
        font-size: 12px;
        color: #9b9b9b;
    }
    .time i {
        margin-left: 5px;
    }
    .item_txt {
        margin: 10px 0 10px 50px;
        color: #333333;
    }

</style>
